// JavaScript Document
/**
*@description : 画板
@@version : 12.0
*@author : WangTao
*@date : 2013-10-29
*@API: link#http://w3school.com.cn/html5/html5_ref_canvas.asp
*/

$(function(){

	window.canvas = null;
	window.ctx=null;
	window.canvas_buff = null;
	window.ctx_buff=null;
	window.canvasWidth=665;
	window.canvasHeight=500;
	var size = 1;
	var color = "blue";//画笔颜色
	type = 'pencilBtn';//画笔类型
	var startX;
	var startY;
    var canDraw = false;
	//window.cacheList = [];//撤销重做的集合
	//window.cacheIndex = 0;//缓存下标
	var scale_zoom = 100;//zoom大小基数
	var toolCache=null;//缓存上一个工具是什么，用于切换到上个工具
	initCanvas();
	ToolBar.init();
	//初始化画布
	function initCanvas(){
		canvas = document.getElementById("mainBoard");
		ctx = canvas.getContext("2d");//相当于java里面画笔
		canvas.width = canvasWidth;
		canvas.height = canvasHeight
		
		//相当于双缓冲背板
		canvas_buff =  document.getElementById("buff");
		ctx_buff = canvas_buff.getContext('2d');	
		canvas_buff.width = canvasWidth;
		canvas_buff.height = canvasHeight;
		
		canvasTop = $(canvas).offset().top
		canvasLeft = $(canvas).offset().left;
		
	}
	//设置画布大小
	window.setCanvasSize = function(w,h){
		ctx_buff.width = canvas.width = w;
		ctx_buff.height = canvas.height = h;	
		canvasWidth = w;
		canvasHeight = h;
		canvasTop = $(canvas).offset().top
		canvasLeft = $(canvas).offset().left;
	}
	
	/**
	*清空画布
	*/
	var clearContext = function(type){
		if(!type){
			ctx_buff.clearRect(0,0,canvasWidth,canvasHeight);
		}else{
			ctx.clearRect(0,0,canvasWidth,canvasHeight);
			ctx_buff.clearRect(0,0,canvasWidth,canvasHeight);
		}
	}
	 
	
		//鼠标按下事件
		var mousedown = function(e){
			//ctx.strokeStyle= color;
			ctx_buff.strokeStyle= color;
			ctx_buff.fillStyle = color;
			ctx_buff.lineWidth = size;
			e=e||window.event;
			startX = e.clientX - canvasLeft;
			startY = e.clientY - canvasTop;
			ctx_buff.moveTo(startX ,startY );
			canDraw = true;			
			
			if(type == 'pencilBtn'){//铅笔
				ctx_buff.beginPath();
			}else if(type == 'circleBtn'||type=='circleFillBtn'){//圆形
				ctx.beginPath();
				ctx.moveTo(startX ,startY );
				ctx.lineTo(startX +2 ,startY+2);
				ctx.stroke();	
				
			}else if(type=='fillBtn'){//FIXME 喷桶，不知道实现原理，暂时画个渐变色的填充圆
				//clearContext();   
				ctx_buff.fillStyle = color;
				ctx_buff.fillRect(0,0,canvasWidth,canvasHeight);
				ctx_buff.stroke();
			}else if(type=='suckerBtn'){//吸管工具
				/**
					此吸管工具实现原理是
					用getImageData(开始点X,开始点Y,宽度,高度)方法获得图片信息，
					然后获得信息的1像素，每个像素有4个属性，红、绿、蓝和透明度
				*/
				var imgData = ctx.getImageData(startX,startY,1,1);//只获得1个像素点的信息
				var pxData = imgData.data;
				//alert(imgData.data);
				//imgData.data = [红,绿,蓝,透明度];
				//RGB(红,绿,蓝)//取值范围从1~255
				//alert(pxData[0]+pxData[1]+pxData[2]);
				var _rgb = [];
				 _rgb.push('rgb('+pxData[0],pxData[1],pxData[2]+")");
				var rgbColor = _rgb.join(',');
				color = rgbColor;
				type = toolCache;//吸完后，还原到上一个工具
				ToolBar.setCursor(type);//吸完后，还原到上一个鼠标样式
				$('#suckerBtn').removeClass(ToolBar.chooseClass);//去掉吸管选中样式
				$('#'+type).addClass(ToolBar.chooseClass);//给上一个工具添加选中样式
			}else if(type=="spurtBtn"){//喷桶
				//ctx_buff.fillStyle = color;
				for(var i=0,j=size==1?20:size*20;i<j;i++){//画的次数，跟size有关，默认20次，其他是size*20次
					var randomX = Math.random()*size*5>>0;//5倍的size以内随机数
					var randomY = Math.random()*size*5>>0;//5倍的size以内随机数
					//在在 startX+randomX * startY +randomY 这个坐标系内随机画1*1的点
					ctx_buff.fillRect(startX+randomX,startY +randomY,1,1);
				}
				ctx_buff.stroke();
			}else if(type == 'rubberBtn'){//橡皮							
				ctx.clearRect(startX - size * 10 ,  startY - size * 10 , size * 20 , size * 20);				
			}	
		};
		 
		//鼠标移动事件
		var mousemove = function(e){ 
			e=e||window.event;
			var x = e.clientX   - canvasLeft;
			var y = e.clientY  - canvasTop;	
			//方块  4条直线搞定
			if(type == 'squareBtn'||type=='squareFillBtn'){
				if(canDraw){
					ctx_buff.lineWidth = 1;//设置线宽，不用选择的size
					ctx_buff.beginPath();
					clearContext();
					ctx_buff.moveTo(startX , startY);						
					ctx_buff.lineTo(x  ,startY );
					ctx_buff.lineTo(x  ,y );
					ctx_buff.lineTo(startX  ,y );
					ctx_buff.lineTo(startX  ,startY );
					if(type=='squareFillBtn'){
						//ctx_buff.fillRect(startX,startY,x-startX,y-startY);
						ctx_buff.fill();//原来他妈的fill直接就能填充，白算了的半天……
					}
					ctx_buff.stroke();
				}
			
			}else if(type=='triangleBtn'||type=='triangleFillBtn'){//画三角形,这个不知道算法，随便画了一个
				if(canDraw){
					ctx_buff.lineWidth = 1;//设置线宽，不用选择的size
					ctx_buff.beginPath();
					clearContext();
					ctx_buff.moveTo(startX , startY);	
					ctx_buff.lineTo(x  ,y );
					ctx_buff.lineTo(startX/2  ,y);
					ctx_buff.lineTo(startX  ,startY );
					if(type=='triangleFillBtn'){
						//ctx_buff.fillRect(startX,startY,x-startX,y-startY);
						ctx_buff.fill();//原来他妈的fill直接就能填充，白算了的半天……
					}
					ctx_buff.stroke();
				}
			}else if(type =='lineBtn'){//直线						
				if(canDraw){
					ctx_buff.beginPath();
					clearContext();
					ctx_buff.moveTo(startX , startY);
					ctx_buff.lineTo(x  ,y );
					ctx_buff.stroke();
				}
			//铅笔
			}else if(type == 'pencilBtn'){
				if(canDraw){
					ctx_buff.lineTo(e.clientX   - canvasLeft ,e.clientY  - canvasTop);
					ctx_buff.stroke();						
				}
			//圆 未画得时候 出现一个圈圈
			}else if(type == 'circleBtn'||type=='circleFillBtn'){						
				clearContext();
				if(canDraw){
					ctx_buff.beginPath();			
					var radii = Math.sqrt((startX - x) *  (startX - x)  + (startY - y) * (startY - y));
					// 画圆,圆心是startX,startY,半径radii,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针
					ctx_buff.arc(startX,startY,radii,0,Math.PI * 2,false);									
					if(type=='circleFillBtn'){
						ctx_buff.fill();
					}
					ctx_buff.stroke();
				}else{	
					ctx_buff.beginPath();					
					ctx_buff.arc(x,y,20,0,Math.PI * 2,false);
					if(type=='circleFillBtn'){
						ctx_buff.fill();
					}
					ctx_buff.stroke();
				}
			//涂鸦 未画得时候 出现一个小圆
			}else if(type == 'handwritingBtn'){											
				if(canDraw){
					ctx_buff.beginPath();	
					ctx_buff.strokeStyle = color;
					ctx_buff.fillStyle  = color;
					ctx_buff.arc(x,y,size*10,0,Math.PI * 2,false);		
					ctx_buff.fill();
					ctx_buff.stroke();
					ctx_buff.restore();
				}else{	
				//FIXME 做一个跟随鼠标的圆点
					clearContext();
					ctx_buff.beginPath();					
					ctx_buff.fillStyle  = color;
					ctx_buff.arc(x,y,size*10,0,Math.PI * 2,false);
					ctx_buff.fill();
					ctx_buff.stroke();
				}
			}else if(type=="spurtBtn"){//喷桶 	//TODO 暂时想法是一个圆头*size，画个圆，之后随机在圆里面添加 一堆小点
				//clearContext();
				if(canDraw){
					for(var i=0,j=size==1?20:size*20;i<j;i++){//画的次数，跟size有关，默认20次，其他是size*20次
						var randomX = Math.random()*size*5>>0;//5倍的size以内随机数
						var randomY = Math.random()*size*5>>0;//5倍的size以内随机数
						//在在 x+randomX * y +randomY 这个坐标系内随机画1*1的点
						ctx_buff.fillRect(x+randomX,y+randomY,1,1);
					}
					ctx_buff.stroke();
				}
				
			}else if(type=='flowerBtn'){//爆个菊花，爆的算法没看懂
				if(canDraw){
					var n=0;
					var dx=x;
					var dy=y;
					var s = 100;
					ctx_buff.beginPath();
					ctx_buff.fillStyle=color;
					ctx_buff.strokeStyle='rgb(0,0,100)';
					var x = Math.sin(0);
					var y = Math.cos(0);
					var dig=Math.PI/15*11;
					for(var i = 0;i<30;i++){
						var x = Math.sin(i*dig);
						var y = Math.cos(i*dig);
						//用三角函数计算顶点
						ctx_buff.lineTo(dx+x*s,dy+y*s);
					}
					ctx_buff.closePath();
					ctx_buff.fill();
					ctx_buff.stroke();
				}
			
			}else if(type == 'rubberBtn'){	//橡皮擦 不管有没有在画都出现小方块 按下鼠标 开始清空区域
				ctx_buff.lineWidth = 1;
				clearContext();
				ctx_buff.beginPath();			
				ctx_buff.strokeStyle =  '#000000';						
				ctx_buff.moveTo(x - size * 10 ,  y - size * 10 );						
				ctx_buff.lineTo(x + size * 10  , y - size * 10 );
				ctx_buff.lineTo(x + size * 10  , y + size * 10 );
				ctx_buff.lineTo(x - size * 10  , y + size * 10 );
				ctx_buff.lineTo(x - size * 10  , y - size * 10 );	
				ctx_buff.stroke();		
				if(canDraw){							
					ctx.clearRect(x - size * 10 ,  y - size * 10 , size * 20 , size * 20);
				}
			//画个带背景的圈圈……
			}else if(type=='targetBtn'){
				clearContext();
				var mygradient=ctx_buff.createRadialGradient(300,300,0,300,300,300);           
				mygradient.addColorStop("0","magenta");
				mygradient.addColorStop(".25","blue");
				mygradient.addColorStop(".50","green");
				mygradient.addColorStop(".75","yellow");
				mygradient.addColorStop("1.0","red");                
				ctx_buff.fillStyle=mygradient;
				ctx_buff.fillRect(x,y,size*10,size*10);
				ctx_buff.stroke();
			}else{
				//alert('no no no ...');
				
			}
		};
		
		//鼠标抬起事件处理
		var mouseup = function(e){
			e=e||window.event;
			canDraw = false;
			var image = new Image();
			//文字，添加到这里是防止浏览器window.prompt阻断onmouseup事件，导致换工具的时候上个操作的onmouseup没有触发
			if(type=='textBtn'){
				var text = window.prompt('Please write text here!','');
				if(text){
					ctx_buff.font= size*5+"px Georgia";
					ctx_buff.fillStyle = color;
					ctx_buff.fillText(text,startX,startY);
				}
			}
			if(type!='rubberBtn'){
				image.src = canvas_buff.toDataURL();
				image.onload = function(){
					ctx.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
					clearContext();
					Cache.saveImageToCache();
				}
				var x = e.clientX   - canvasLeft;
				var y = e.clientY  - canvasTop;	
				ctx.beginPath();
				ctx.moveTo(x ,y );
				ctx.lineTo(x +2 ,y+2);
				ctx.stroke();	
			}
		};
		
		/**
		*鼠标移出画布事件
		*鼠标移出时，清空现在画笔内容，否则留有上个画笔最后痕迹
		*/
		var mouseout = function(e){
			//if(type != 'handwritingBtn'){
				clearContext();
			//}
		}
		
		//绑定画布事件>>>>start#############################################################################
		$(canvas_buff).unbind();
		$(canvas_buff).bind('mousedown',mousedown);
		$(canvas_buff).bind('mousemove',mousemove);
		$(canvas_buff).bind('mouseup',mouseup);
		$(canvas_buff).bind('mouseout',mouseout);
		$(canvas).bind('mousedown',mousedown);
		$(canvas).bind('mousemove',mousemove);
		$(canvas).bind('mouseup',mouseup);
		//	$(canvas).bind('mouseout',mouseout);
		//绑定画布事件>>>>endt     #############################################################################
		
		
		////////////////////////////////////////////////////////撤销重做start////////////////////////////////
	    //撤销上一个操作
		$('#cancelBtn').bind('click', function(){
			Cache.cacheIndex++;
			ctx.clearRect(0,0,canvasWidth,canvasHeight);
			var  image = new Image();
			var index = Cache.cacheList.length-1 - Cache.cacheIndex  ;
			var url = Cache.cacheList[index];
			image.src = url||null;//这里缓存里面没有返回undefined，image赋undefined报错，不知道为啥，null就可以,TMD调了1个小时！
			image.onload = function(){
				ctx.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
			}
		});

		//重做上一个操作
		$('#nextBtn').bind('click', function(){
			Cache.cacheIndex--;
			ctx.clearRect(0,0,canvasWidth,canvasHeight);
			var  image = new Image();
			var index = Cache.cacheList.length-1 - Cache.cacheIndex  ;
			var url = Cache.cacheList[index];
			image.src = url||null;
			image.onload = function(){
				ctx.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , canvasWidth , canvasHeight);
			}
		});

		////////////////////////////////////////////////////////撤销重做end ////////////////////////////////
		
	//铅笔
	$('#pencilBtn').bind('click', function(img) {
		 type = 'pencilBtn';
	});
	//直线
	$('#lineBtn').bind('click', function(img) {
	     type = 'lineBtn';
	});
	//圆形
	$('#circleBtn').bind('click', function(img) {
	    type = 'circleBtn';
	});
	//实心
	$('#circleFillBtn').bind('click', function(img) {
	    type = 'circleFillBtn';
	});
	//方形
	$('#squareBtn').bind('click', function(img) {
	    type = 'squareBtn';
	});
	//实心方形
	$('#squareFillBtn').bind('click', function(img) {
	    type = 'squareFillBtn';
	});
	//三角形
	$('#triangleBtn').bind('click', function(img) {
	    type = 'triangleBtn';
	});
	//实心三角形
	$('#triangleFillBtn').bind('click', function(img) {
	    type = 'triangleFillBtn';
	});
	
	//笔刷
	$('#handwritingBtn').bind('click', function(img) {
	    type = 'handwritingBtn';
	});
	//橡皮擦子
	$('#rubberBtn').bind('click', function(img) {
	    type = 'rubberBtn';
	});
	//菊花残
	$('#flowerBtn').bind('click', function(img) {
	    type = 'flowerBtn';
		$("#shapes").fadeOut();
	});
	//菊花烈
	$('#targetBtn').bind('click', function(img) {
	    type = 'targetBtn';
		$("#shapes").fadeOut();
	});
	//清空
	$('#clearBtn').bind('click', function(img) {
		clearContext(1);
	});
	//填充
	$('#fillBtn').bind('click', function(img) {
		type="fillBtn";
	});
	//喷桶
	$('#spurtBtn').bind('click', function(img) {
		type="spurtBtn";
	});
	//吸管
	$('#suckerBtn').bind('click', function(img) {
	    toolCache = type;//缓存点击吸管前工具
		type="suckerBtn";
	});
	//文字
	$('#textBtn').bind('click', function(img) {
		type="textBtn";
	});
	
	//放大
	$('#zoomInBtn').bind('click', function(img) {
		var scale = scale_zoom + size;
		var scaleW = canvasWidth * scale /100;
		var scaleH = canvasHeight * scale / 100;
		canvas.style.width = scaleW + 'px';
		canvas.style.height = scaleH + 'px';
		canvas_buff.style.width = scaleW + 'px';
		canvas_buff.style.height = scaleH + 'px';
		scale_zoom+=size;
	});
	
	//缩小TODO 应该用context.scale来做
	$('#zoomOutBtn').bind('click', function(img) {
		//FIXME……
		var scale = scale_zoom - size;
		var scaleW = canvasWidth * scale /100;
		var scaleH = canvasHeight * scale / 100;
		canvas.style.width = scaleW + 'px';
		canvas.style.height = scaleH + 'px';
		canvas_buff.style.width = scaleW + 'px';
		canvas_buff.style.height = scaleH + 'px';
		scale_zoom-=size;
		/*
		var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  
		ctx.scale(0.8,0.8);
		 ctx.putImageData(canvasData, 0, 0);*/
	});
	
	
	

//更改线条大小start ****************************************************************************

	$('#chooseSize').bind('click', function(e) {
			e = e||window.event;
			if($("#line_size").is(":hidden")){
				var top =  e.clientY;
				var left =e.clientX;
				$("#line_size")[0].style.left = 550 + 5; 
				$("#line_size")[0].style.top = 57   + "px";
				$("#line_size").fadeIn();
			}else{
				$("#line_size").fadeOut();
			}
	});

	$('#lineSize_1').bind('click', function(img) {
			$("#chooseSize").attr("src" , "./images/line_size_1.png");		
			size = 1;
			$("#line_size").fadeOut();
	});
	$('#lineSize_2').bind('click', function(img) {
			$("#chooseSize").attr("src" , "./images/line_size_3.png");
			size = 5;
			$("#line_size").fadeOut();
	});
	$('#lineSize_3').bind('click', function(img) {
			 $("#chooseSize").attr("src" , "./images/line_size_5.png");
			size = 10;
			$("#line_size").fadeOut();
	});
	$('#lineSize_4').bind('click', function(img) {
			 $("#chooseSize").attr("src" , "./images/line_size_7.png");
			size = 15;
			$("#line_size").fadeOut();
	});
	$('#lineSize_5').bind('click', function(img) {
			 $("#chooseSize").attr("src" , "./images/size.png");
			size = 20;
			$("#line_size").fadeOut();
	});

//更改线条大小end ****************************************************************************


///////////////////////////////////////////////////// 特殊图形start/////////////////////////////
	$('#shapeBtn').bind('click', function(e) {
			e = e||window.event;
			if($("#shapes").is(":hidden")){
				var top =  e.clientY;
				var left =e.clientX;
				$("#shapes")[0].style.left =left-15+'px'; 
				$("#shapes")[0].style.top = top+ 10   + "px";
				$("#shapes").fadeIn();
			}else{
				$("#shapes").fadeOut();
			}
	});
///////////////////////////////////////////////////// 特殊图形end/////////////////////////////

	//TODO:裁剪
	$('#cutBtn').bind('click',function(e){
			var val = [];
			val.push('累了，不想做了……\n');
			val.push('实现原理：\n');
			val.push('方法一：取所选区域的坐标startX,x,startY,y');
			val.push('根据坐标用getImageData方法把图像数据取出来，ok！\n');
			val.push('方法二：用html2canvas插件，直接截图，返回image data 数据\n');
			val.push('方法三：取坐标，用 context.clip();方法直接cut');
			alert(val.join('\n'));		 
	 });
	
	
 	
	
	//选择颜色
	$('#colorSelector').ColorPicker({
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#colorSelector div').css('backgroundColor', '#' + hex);
			color = '#'+hex;
		}
	});

	//下载
	$("#download").click(function(e){
		 $("#downloadImage_a")[0].href=canvas.toDataURL();
	});
 
});